﻿@{
    //ViewBag.Title = "Probe";
}
@section scripts
{
    <script type="text/javascript">
        var ld = [];
        var len;
        var index;
        var interval;

        function updateSlider(val) {
            index = val;
            $("#slider1").val(val);
            if (ld.length > 0) {
                $("#animation").attr("src", "/Wap/ProbeImage/@{@ViewBag.FcstType}/" + ld[val - 1].Id + "-" + ld[val - 1].Stage);
                $("#observTime").html(ld[val - 1].ObservTime);
            }
        }

        function play(obj) {
            if ($(obj).hasClass("start")) {
                start();
                $(obj).removeClass("start").addClass("stop");
            } else {
                stop();
                $(obj).removeClass("stop").addClass("start");
            }
        }

        function start() {
            interval = setInterval(function () {
                index++;
                if (index > len) index = 1;
                updateSlider(index);
            }, 2000);
        }

        function stop() {
            clearInterval(interval);
        }

        function init() {
            index = len = ld.length;
            $("#slider1").attr("max", len);
            updateSlider(len);
        }

        function loadData(type) {

            stop();
            $("#play").removeClass("stop").addClass("start");
            $.getJSON("/Wap/ProbeJson/@ViewBag.StationNum/@ViewBag.FcstType-" + type, function (data) {
                ld = data;
                init();
            });
        }

        $(document).ready(function () {
            var type = $("input[name='productType'][checked]").val();
            loadData(type);
            $("#sliderBar").width($(window).width() - 50);
            $(window).resize(function () {
                $("#sliderBar").width($(window).width() - 50);
            });
            $("input[name='productType']").change(function () {
                loadData($(this).attr("value"));
            });
        });
    </script>
}
<div style="padding: 7px;">
    <img id="animation" alt="" src="" />
    <div id='observTime' style="position: absolute; width: 100%; text-align: center;margin-bottom: 0px; "></div>
</div>

<div class="productType">
    @if (string.Equals(@ViewBag.FcstType,"cloud", StringComparison.CurrentCultureIgnoreCase))
    {
        <div>类型选择</div>
        <div class="radio">
            <ul>
                <li><input id="productType_fy2d_l" name="productType" type="radio" checked="checked" value="fy2d_l" /><label for="productType_fy2d_l">红外</label></li>
                <li><input id="productType_fy2d_m" name="productType" type="radio" value="fy2d_m" /><label for="productType_fy2d_m">水汽</label></li>
                <li><input id="productType_fy2d_vis" name="productType" type="radio" value="fy2d_vis" /><label for="productType_fy2d_vis">可见光</label></li>
            </ul>
        </div>
    }
    @if (string.Equals(@ViewBag.FcstType,"radar", StringComparison.CurrentCultureIgnoreCase))
    {
        <div>类型选择</div>
        <div class="radio">
            <ul>
                <li><input id="productType_zj" name="productType" type="radio" checked="checked" value="58457" /><label for="productType_zj">浙江雷达</label></li>
                <li><input id="productType_nb" name="productType" type="radio" value="58562" /><label for="productType_nb">宁波雷达</label></li>
                <li><input id="productType_sz" name="productType" type="radio" value="58556" /><label for="productType_sz">嵊州雷达</label></li>
            </ul>
        </div>
    }
    
    <div class="clear"></div>
</div>

<div style="padding: 5px 0 5px 0; height: 40px; background: #fafafa; width: 100%;">
    <div style="float: left; text-align: center; width: 40px;">
        <span class="play"><a id="play" href="javascript:;" class="start" onclick="play(this);" onfocus="this.blur();"></a></span>
    </div>
    <div id="sliderBar" style="height: 40px; position: relative; padding: 0 5px; margin-left:50px; margin-top: 6px;">
        <div style="width: 100%; float: left;">
            <input id="slider1" name="slider1" type="range" min="1" max="20" step="1" onchange="updateSlider(this.value)" style="max-width: none; width: 100%;" />
        </div>
        
    </div>
    
</div>